<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="renderer" content="webkit">
    <title>艾玛英语</title>
    <!-- ================== BASE CSS STYLE ================== -->
    <link rel="stylesheet" href="__PATH__/assets/css/plugin/swiper.min.css">
    <link rel="stylesheet" href="__PATH__/assets/css/base.css">
    <!-- ================== / BASE CSS STYLE ================== -->
    <!-- ================== PAGE CSS STYLE ================== -->
</head>
<style type="text/css">
    .title_color{
        display: inline-block;
        margin-bottom: 10px;
        padding: 5px;
        background: #dcdcdc;
        vertical-align: middle;
    }
</style>
<body>
    <div id="main" class="game">
        <div class="game-nav double">
            <a href="javascript:;"><img src="__PATH__/assets/css/img/game/index.png" alt=""></a>
            <div class="progress-bar"><span id="progress" style="width:0%"></span></div>
            <button onclick="tran()"><img src="__PATH__/assets/css/img/game/translate.png" alt=""></button>
        </div>
        <div class="full-cover">
            <img src="{$books.pic}" alt="">
        </div>
        <div class="higlight-text">
            <p style="text-align: center" >
                <span id="translate" style="display: none">{$books.correct}</span>
            </p>
            <p style="text-align: center" id="title">
               {$books.title}
            </p>
        </div>
        <div class="game-bottom">
            <button class="prev"><img src="__PATH__/assets/css/img/game/left.png" alt=""></button>
            <button class="audio" audio-src="" audio-name="Fly Me To The Moon" style="display: none"><img src="__PATH__/assets/css/img/game/audio.png" alt=""><!-- div id="jquery_jplayer_1" style="display: none"></div> --><audio hidden  id="content_audio" src='__PATH__/assets/audio/Fly_Me_To_The_Moon.mp3' controls='controls'> </audio></button>
            <button class="next"><img src="__PATH__/assets/css/img/game/right.png" alt=""></button>
        </div>
    </div>
    <!-- ================== BASE JS ================== -->
    <script src="__PATH__/assets/js/jquery-1.9.1.min.js"></script>
    <script src="__PATH__/assets/js/plugin/swiper.jquery.min.js"></script>
    <script src="__PATH__/assets/js/plugin/jquery.jplayer.min.js"></script>
    <script src="__PATH__/assets/js/common.js"></script>
    <!-- ================== / BASE JS ================== -->
    <!-- ================== PAGE LEVEL JS ================== -->
    <script>
    // $(document).ready(function() {
    //     var imgOptionSwiper = new Swiper('.img-option-swiper', {
    //         pagination: '.pagination',
    //         spaceBetween: 20
    //     });

    //     var audioInitial = function() {
    //         var _src = $('.audio').attr('audio-src');
    //         var _name = $('.audio').attr('audio-name');
    //         $("#jquery_jplayer_1").jPlayer({
    //             ready: function (event) {
    //                 $(this).jPlayer("setMedia", {
    //                     title: _name,
    //                     mp3: _src
    //                 });
    //             },
    //             swfPath: "__PATH__/assets/js/plugin/jquery.jplayer.swf",
    //             supplied: "mp3"
    //         });
    //     };
    //     audioInitial();

        

        $('.audio').click(function() {
           var player = $('#content_audio')[0];
           if (player.paused){ /*如果已经暂停*/
                player.play(); /*播放*/
            }else {
                player.pause();/*暂停*/
            }
    });
    </script>
    <script type="text/javascript">
        function tran(){
            if($('#translate').is(':hidden')){
                $('#translate').show();
            }else{
                $('#translate').hide();
            }
            //console.log($('#translate').is(':hidden'))
        }
        function play(b){
            c = '.play'+b;
            var player = $(c)[0]; /*jquery对象转换成js对象*/
            if (player.paused){ /*如果已经暂停*/
                player.play(); /*播放*/
            }else {
                player.pause();/*暂停*/
            }
        }
    </script>
    <script type="text/javascript">
        var i = 0;
        $('.next').click(function(){
            var book_id = {$books.id};
            $.ajax({
                    type: "POST",
                    url: "{:url('wechat/book_content')}",
                    data:{book_id:book_id,page:i},
                    dataType:'json', 
                    success: function (dt){
                        if(dt.code == '200'){
                            $('#title').html(dt.title);
                            $('.full-cover img').attr('src',dt.pic);
                            $('#content_audio').attr('src',dt.audio);
                            $('#translate').text(dt.correct);
                            $('#progress').css({"width":dt.percent});
                            i++;   
                        }else{
                            alert('绘本已完结')
                        }

                    }
                })
             if(i == '-1'){
                $('.audio').hide();
             }else{
                $('.audio').show();
             }
            
        })
        $('.prev').click(function(){
             var book_id = {$books.id};
             if(i > -1){
                i--;
                $.ajax({
                    type: "POST",
                    url: "{:url('wechat/book_content')}",
                    data:{book_id:book_id,page:i},
                    dataType:'json', 
                    success: function (dt){
                        if(dt.code == '200'){
                            $('#title').html( dt.title);
                            $('.full-cover img').attr('src',dt.pic);
                            $('#content_audio').attr('src',dt.audio);
                            $('#translate').text(dt.correct);
                            $('#progress').css({"width":dt.percent});  
                        }
                    }
                })
             }
             if(i == '-1'){
                $('.audio').hide();
             }else{
                $('.audio').show();
             }
             
           
        })
    </script>


    <!-- ================== / PAGE LEVEL JS ================== -->
</body>

</html>
